<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        {{words}}
        {{obj.words}}
        <button @click="obj.words+='~'">++</button>
        <hr>
        <h1>{{list}}</h1>
        <button @click="list.push(50)"></button>

    </div>



    <script src=" vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                words: '苹果',
                obj: {
                    words: '苹果'
                },
                list: [10, 20, 30, 40],
            },
            computed: {

            },

            methods: {

            },
            watch: {
                // 1.监听基本数据类型
                words(newVal, oldVal) {
                    console.log('数据滨化了  ----->  ', newVal, oldVal);

                },

                "obj.age"(newVal, oldVal) {
                    console.log('数据滨化了  ----->  ', newVal, oldVal);
                },
                // 2.监听复杂数据类型（深度监听）

                obj: {
                    handler(newVal, oldVal) {
                        console.log('对象监听  ----->  ', newVal, oldVal);

                    },
                    deep: true, //深度监听
                    immediate: true,//立刻执行
                },
                // 监听数组：七个方法修改数组，会被监听到
                list(newVal, oldVal) {
                    console.log('newVal,oldVal  ----->  ', newVal, oldVal);
                }
            }


        });
    </script>
</body>

</html>